/*
 *                        .::::.
 *                      .::::::::.
 *                     :::::::::::
 *                  ..:::::::::::'
 *               '::::::::::::'
 *                 .::::::::::
 *            '::::::::::::::..
 *                 ..::::::::::::.
 *               ``::::::::::::::::
 *                ::::``:::::::::'        .:::.
 *               ::::'   ':::::'       .::::::::.
 *             .::::'      ::::     .:::::::'::::.
 *            .:::'       :::::  .:::::::::' ':::::.
 *           .::'        :::::.:::::::::'      ':::::.
 *          .::'         ::::::::::::::'         ``::::.
 *      ...:::           ::::::::::::'              ``::.
 *     ````':.          ':::::::::'                  ::::..
 *                        '.:::::'                    ':'````..
 *
 * @Author: byx
 * @Date: 2023-01-08 16:37:59
 * @LastEditors: byx
 * @LastEditTime: 2023-01-08 16:41:20
 * @version: 1.0
 * @Descripttion: wwww.byx1024.top
 */
import React from 'react'
import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { useHistory } from 'react-router'

// import { withRouter } from 'react-router-dom'

// 提供返回的两种方式：
// 1. withRouter的使用
// history match location: 这个组件必须是通过路由配置的  <Route></Route>
// 自己渲染的组件，无法获取到路由信息  <NavBar></NavBar>

// 2. 路由提供了几个和路由相关的hook
// useHistory  useLocation  useParams

export default function NavBar({ children, extra }) {
  const history = useHistory()
  // 返回操作
  const back = () => {
    // 跳回上一页
    history.go(-1)
  }

  return (
    <div className={styles.root}>
      <div className="left">
        <Icon type="iconfanhui" onClick={back} />
      </div>
      {/* 居中标题 */}
      <div className="title">{children}</div>
      {/* 右侧内容 */}
      <div className="right">{extra}</div>
    </div>
  )
}
